
import {
  Button,
  Card,
  Col,
  Divider,
  Flex,
  message,
  Modal,
  QRCode,
  Row,
  Typography,
} from 'antd';
import React, { PropsWithChildren } from 'react';
import GamePointsRank from './view/GamePointsRank';
import GameTeamPKTable from './view/GameTeamPKTable';
import { GameInfo,queryGameInfo } from '@/services/game/GameController';
import GameTeamPKView from './view/GameTeamPKView';
/**
 * 赛事信息
 */

interface Props {
  gameId: string;
  modalVisible: boolean;
  onCancel: (colse: boolean) => void;
}

const GameInfoView: React.FC<PropsWithChildren<Props>> = (props) => {
  const { modalVisible, onCancel, gameId } = props;
  const [gameInfo, setGameInfo] = React.useState<GameInfo>();


  React.useEffect(() => {
    queryGameInfo(gameId).then((res) => {
      if (!res.success) {
        message.error(res.errorMessage);
        return;
      }
      setGameInfo(res.data);
    });
  }, []);
  return (
    <Modal
      open={modalVisible}
      onCancel={() => onCancel(false)}
      footer={null}
      width="100%"
      height="100%"
      style={{ padding: 0, top: 10 }}
    >
      <Row style={{ padding: 10, height: '95vh' }}>
        <Col span={4}>
          <Card title="赛事倒计时">
            <Flex style={{ padding: 10, alignItems: 'center' }} vertical>
              <Typography.Title level={1} type="danger">
                04:50:00
              </Typography.Title>
              
              <Typography.Text>
                报名人数：{gameInfo?.offSize} 已签到：{gameInfo?.signleOffSize} 未签到：{(gameInfo?.offSize??0)-(gameInfo?.signleOffSize??0)}
              </Typography.Text>
              <Button style={{ marginTop: 10, width: '70%', height: '5vh' }}>
                查看选手
              </Button>
            </Flex>
          </Card>
          <Card title="签到二维码" style={{marginTop:10}}>
            <QRCode size={250} value="xx"></QRCode>
          </Card>
          <Flex
            style={{
              alignItems: 'center',
              justifyContent: 'end',
            }}
            vertical
          >
            <Button style={{ marginTop: 10, width: '70%', height: '5vh' }}>
              开始比赛
            </Button>
            <Button
              color="danger"
              style={{
                marginTop: 10,
                width: '70%',
                color: '#f50c0cff',
                height: '5vh',
              }}
            >
              结束比赛
            </Button>
          </Flex>
        </Col>
        <Col span={12} style={{ paddingLeft: 10 }}>
            <GameTeamPKTable gameId={gameId} />
        </Col>
        <Col span={8} style={{ paddingLeft: 10 }}>
          <GamePointsRank gameId={gameId} />
        </Col>
      </Row>
   
    </Modal>
  );
};
export default GameInfoView;
